<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div>
                <!-- 搜索 -->
                <el-input v-model="query.blurry" clearable size="small" placeholder="订单号或者订单金额模糊搜索" style="width: 220px;"
                             class="filter-item" @keyup.enter.native="toQuery" />
                <el-select v-model="query.uid" clearable class="filter-item" style="width: 150px" placeholder="请选择用户名称" @change="crud.toQuery" filterable>
                    <el-option
                    v-for="(item, index) in users"
                    :key="item.username + index"
                    :label="item.username"
                    :value="item.uid"
                    />
                </el-select>
                <el-select v-model="query.agentId" clearable class="filter-item" style="width: 150px" 
                                        placeholder="请选择代理商" @change="crud.toQuery" filterable>
                    <el-option
                    v-for="(item, index) in agents"
                    :key="item.phone + index"
                    :label="item.phone"
                    :value="item.id"
                    />
                </el-select>
                <rrOperation :crud="crud"/>
            </div>
            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;">
                                <el-table-column v-if="columns.visible('orderNo')"
                                                 prop="orderNo"
                                                 label="订单号" min-width="130px"/>
                                <el-table-column v-if="columns.visible('userName')"
                                                 prop="userName"
                                                 label="用户名称"/>
                                <el-table-column v-if="columns.visible('agentName')"
                                                 prop="agentName"
                                                 label="代理商"/>
                                <el-table-column v-if="columns.visible('amount')"
                                                 prop="amount"
                                                 label="订单金额"/>
                                <el-table-column v-if="columns.visible('userAmount')"
                                                 prop="userAmount"
                                                 label="用户返还金额"/>
                                <el-table-column v-if="columns.visible('agentAmount')"
                                                 prop="agentAmount"
                                                 label="代理商佣金"/>
                                <el-table-column v-if="columns.visible('companyAmount')"
                                                 prop="companyAmount"
                                                 label="公司收入金额"/>
                                <el-table-column v-if="columns.visible('isTransfer')"
                                                 prop="isTransfer"
                                                 label="是否已转账"/>
                                <el-table-column v-if="columns.visible('createTime')"
                                                 prop="createTime"
                                                 label="创建时间">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.createTime) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('updateTime')"
                                                 prop="updateTime"
                                                 label="更新时间">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.updateTime) }}</span>
                                    </template>
                                </el-table-column>
                <!--
                <el-table-column v-permission="['admin','rechargeOrder:edit','rechargeOrder:del']" label="操作"
                                 width="150px" align="center">
                    <template slot-scope="scope">
                        <udOperation
                                :data="scope.row"
                                :permission="permission"
                        />
                    </template>
                </el-table-column>
                -->
            </el-table>
            <!--分页组件-->
            <pagination/>
        </div>
    </div>
</template>

<script>
    import { getAllAgent } from '@/api/agentMember'
    import { getAllMemberUser } from '@/api/memberUser'
    import crudRechargeOrder from '@/api/rechargeOrder.js'
    import CRUD, {crud, form, header, presenter} from '@crud/crud'
    import rrOperation from '@crud/RR.operation'
    import crudOperation from '@crud/CRUD.operation'
    import udOperation from '@crud/UD.operation'
    import pagination from '@crud/Pagination'
    import MaterialList from "@/components/material";

    // crud交由presenter持有
    const defaultCrud = CRUD({
        title: '充值订单',
        url: 'api/rechargeOrder',
        sort: 'id,desc',
        crudMethod: {...crudRechargeOrder}
    })
    const defaultForm = {id: null, orderNo: null, uid: null, userName: null, agentId: null, agentName: null, amount: null, userAmount: null, agentAmount: null, companyAmount: null, isTransfer: null, isDel: null, createTime: null, updateTime: null}
    export default {
        name: 'RechargeOrder',
        components: {pagination, crudOperation, rrOperation, udOperation , MaterialList},
        mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
        data() {
            return {
                users: [],
                agents: [],
                permission: {
                    add: ['admin', 'rechargeOrder:add'],
                    edit: ['admin', 'rechargeOrder:edit'],
                    del: ['admin', 'rechargeOrder:del']
                },
                rules: {
                },
                queryTypeOptions: [
                ]
            }
        },
        watch: {
        },
        mounted:function(){ //在页面加载参数结束后执行某个函数
            this.$nextTick(function(){
                //调用需要执行的方法
                this.getAgent()
                this.getMemberUser()
            })      
        },
        methods: {
            // 获取数据前设置好接口地址
            [CRUD.HOOK.beforeRefresh]() {
            }, // 新增与编辑前做的操作
            [CRUD.HOOK.afterToCU](crud, form) {
            },
            getAgent() {
                getAllAgent().then(res => {
                    this.agents = res
                }).catch(() => { })
            },
            getMemberUser() {
                getAllMemberUser().then(res => {
                    this.users = res
                }).catch(() => { })
            }
        }
    }


</script>

<style scoped>
    .table-img {
        display: inline-block;
        text-align: center;
        background: #ccc;
        color: #fff;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

</style>
